<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>斗地主游戏大厅</title>
    <link rel="stylesheet" th:href="@{/js/lib/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/js/lib/fontawesome/css/all.min.css}">
    <style>
        /* 移动端基础样式优化 */
        body {
            background: #f8f9fa;
            -webkit-tap-highlight-color: transparent;
            padding-bottom: env(safe-area-inset-bottom);
        }
        
        /* 导航栏移动端优化 */
        .navbar {
            padding: 0.5rem 1rem;
            background: linear-gradient(135deg, #1e88e5, #1565c0);
        }
        
        .navbar-brand {
            font-size: 1.2rem;
            font-weight: 600;
        }
        
        /* 房间卡片样式 */
        .game-card {
            background: white;
            border-radius: 15px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            margin-bottom: 20px;
            overflow: hidden;
        }
        
        .game-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        }
        
        .game-card .card-header {
            background: none;
            border-bottom: 1px solid rgba(0,0,0,0.1);
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .game-card .card-body {
            padding: 20px;
        }
        
        /* 状态标签样式 */
        .status-badge {
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 500;
        }
        
        .status-waiting {
            background: rgba(25, 118, 210, 0.1);
            color: #1976d2;
        }
        
        .status-playing {
            background: rgba(104, 159, 56, 0.1);
            color: #689f38;
        }
        
        /* 操作栏样式 */
        .action-bar {
            background: white;
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 30px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        
        /* 搜索框样式 */
        .search-box {
            border-radius: 10px;
            padding: 10px 15px;
            border: 1px solid #dee2e6;
            transition: all 0.2s ease;
            width: 250px;
        }
        
        .search-box:focus {
            border-color: #1976d2;
            box-shadow: 0 0 0 3px rgba(25,118,210,0.1);
        }
        
        /* 按钮样式 */
        .btn-create {
            background: linear-gradient(135deg, #1e88e5, #1565c0);
            border: none;
            padding: 10px 25px;
            border-radius: 10px;
            color: white;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        
        .btn-create:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }
        
        /* 移动端适配 */
        @media (max-width: 768px) {
            .action-bar {
                flex-direction: column;
                gap: 15px;
                padding: 15px;
            }
            
            .action-bar .d-flex {
                width: 100%;
            }
            
            .btn-create {
                width: 100%;
                margin-bottom: 10px;
            }
            
            .search-box {
                width: 100% !important;
            }
            
            .game-card {
                margin: 10px;
            }
            
            .container {
                padding: 10px;
            }
        }
        
        /* 动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .fade-in {
            animation: fadeIn 0.3s ease-out forwards;
        }
    </style>
    <th:block th:replace="fragments/navbar :: navbar-style"></th:block>
</head>
<body>
    <!-- 导航栏 -->
    <nav th:replace="fragments/navbar :: navbar('斗地主游戏大厅', 'fas fa-gamepad')"></nav>

    <!-- 主要内容区 -->
    <div class="container py-4">
        <!-- 操作栏 -->
        <div class="action-bar d-flex justify-content-between align-items-center">
            <div class="d-flex gap-2">
                <button id="createRoom" class="btn btn-create">
                    <i class="fas fa-plus me-2"></i>创建房间
                </button>
                <button id="createAIRoom" class="btn btn-create btn-success">
                    <i class="fas fa-robot me-2"></i>创建AI房间
                </button>
                <button id="refreshRooms" class="btn btn-outline-primary">
                    <i class="fas fa-sync-alt me-2"></i>刷新
                </button>
            </div>
            <div class="d-flex gap-3">
                <select class="form-select search-box" id="roomFilter">
                    <option value="all">所有房间</option>
                    <option value="WAITING">等待中</option>
                    <option value="PLAYING">游戏中</option>
                </select>
                <input type="text" class="form-control search-box" placeholder="搜索房间..." id="roomSearch">
            </div>
        </div>

        <!-- 房间列表 -->
        <div id="roomList" class="row g-4">
            <!-- 房间卡片将通过JavaScript动态加载 -->
        </div>
    </div>

    <!-- 加载脚本 -->
    <script th:src="@{/js/lib/jquery.min.js}"></script>
    <script th:src="@{/js/lib/bootstrap.bundle.min.js}"></script>
    <script th:src="@{/js/common.js}"></script>
    <script th:src="@{/js/main.js}"></script>
    <script th:src="@{/js/navbar.js}"></script>
</body>
</html> 